
import PropTypes from 'prop-types'
import { Table, Popconfirm, Pagination } from 'antd'

import ModalForm from './ModalForm'

/** 主体(表格) */
const TableWrap = ({ loading, tableData: dataSource, rowKey, rowSelection, operation, pagination }) => {

  const { editFun, deleteFun } = operation

   // 表格配置
   const columns = [{
     title: '姓名',
     dataIndex: 'userName',
   }, {
       title: '性别',
       dataIndex: 'userSex',
       render: (text) => {
         let returnText = ``
         if (text === '1') returnText = '男'
         if (text === '2') returnText = '女'
         return returnText
       },
     }, {
       title: '年龄',
       dataIndex: 'userAge',
     }, {
       title: '生日',
       dataIndex: 'userBirth',
     }, {
       title: '地址',
       dataIndex: 'address',
     }, {
       title: '操作',
       render: (record) => {
         return (
           <div>
             {/* 在ModalForm组件中 可用this.props获得record属性和onOk方法 */}
             <ModalForm record={record} onOk={editFun.bind(null, record.userId)}>
               <a>编辑</a>
             </ModalForm>
             {/* Popconfirm非自定义组件 antd提供的组件 */}
             <Popconfirm title="是否删除该项？" okText="确认" cancelText="取消"
               onConfirm={deleteFun.bind(null, record.userId)}>
               <a href="">删除</a>
             </Popconfirm>
           </div>
         )
       },
     }]
  return (
    <div>
      <Table 
        loading={loading}  //loading
        rowSelection={rowSelection} //选择监听
        columns={columns}  //表格列配置
        dataSource={dataSource}  //数据源
        rowKey={rowKey}  //每列唯一标识  必给！！！
        pagination={false} //关闭表格自带分页
      /> 
      <Pagination 
        showSizeChanger  //开通改变页数大小能力
        defaultCurrent={Number(pagination.defaultCurrent)}  //默认当前页
        onChange={pagination.onChange}  //改变页数 事件
        onShowSizeChange={pagination.onShowSizeChange}  //改变页大小 事件
        total={Number(pagination.total)}  //总页数
      />
    </div>
  )
}


// 通过PropTypes 获取父组件传来的属性（需引入PropTypes）
TableWrap.propTypes = {
  tableData: PropTypes.array,
  rowKey: PropTypes.string.isRequired,
	selectedKeys: PropTypes.array,
  rowSelection: PropTypes.object,
  operation: PropTypes.object,
  pagination: PropTypes.object,
}

export default TableWrap